<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>科室预约--在线预约挂号系统</title>
    <jsp:include page="include/mangerheadtag.jsp"/>
</head>
<body>
<jsp:include page="include/head.jsp"/>
<jsp:include page="include/menu.jsp"/>

<div style="margin-top: 100px;margin-left: 300px">
    <div id="page-inner">

        <div class="search">
            <h1>科室列表</h1>
            <form id="office" action="<c:url value="/SearchOfficeServlet"/>" method="get">
                <input  value="${requestScope.office.officename}" name="officeName"  autocomplete="off" class="" placeholder="科室名称">
               <input type="hidden" name="action" value="SearchOffice">
                <button type="submit">查找科室</button>
            </form>
            <style>
                .search{
                    height:150px;
                    border-bottom: 2px #2e2e2e solid;
                }
                .search input{
                    height: 40px;
                    width: 200px;
                    color: #2e2e2e;
                    padding: 0 20px;
                    border-radius: 4px;
                }
                .search button{
                    height: 40px;
                    color: #2e2e2e;
                    padding: 0 20px;
                    border-radius: 2px;
                    cursor: pointer;
                }
                .search button:hover{
                    color: #0065AF;
                }
            </style>
        </div>
    </div>
</div>

    <div style="margin-top: 25px;margin-left: 300px">

        <c:if test="${requestScope.office==null}">
            <c:forEach items="${requestScope.officeList}" var="office" >
                <div class="office-info" style="margin-top: 50px">
                    <h3 class="office-name">
                            ${office.officename}
                    </h3>
                    <h2>科室简介</h2>
                    <div>
                            ${office.description}
                    </div>
                    <div>
                        该科室有${office.doctornum}位医生
                    </div>
                    <style>
                        .office-info{
                            border-top: 2px solid #1E9EB9;
                        }
                        .office-info .office-name{
                            border: 1px solid #E8E8E8;
                            background: #F7FDFE;
                        }
                        .office-info h2{
                            border: 1px solid #E8E8E8;
                            background: #F7FDFE;
                        }
                    </style>
                </div>
            </c:forEach>
        </c:if>


        <c:if test="${requestScope.office!=null}">
            <div id="offices" style="width: 600px">
                <div class="office-item" style="width: 600px;height: 350px; overflow: auto">
                    <div class="office-name" >
                        <h3>${requestScope.office.officename}</h3>
                    </div>
                    <div >
                        <p class="p" style="background: white">${requestScope.office.doctornum}位医生</p>
                        <p style="width: 400px;color: black" class="p">${requestScope.office.description}</p>
                    </div>
                </div>
            </div>
        </c:if>


            <style>
                #offices:after{
                    content: "";
                    clear: both;
                    display: block;
                }
            .office-item{
                width: 230px;
                height: 180px;
                float: left;
                text-align: center;
                border: 1px solid #dddddd;
                margin: 30px ;
            }
            .office-item .office-name{
                margin: 30px auto;
                color: #000;
            }
            .office-item p{
                margin: 30px auto;
                color: #2b66a5;
            }
            .office-item .office-click{
                color: #de615e;
                font-size: 15px;
                cursor: pointer;
            }
                .p {
                    font-size: large;
                    color: black;
                    text-align: center;
                    text-indent: 2em;
                    line-height: 1.5;
                    font-family: Arial, serif;
                    background-color: #ccc;
                }
        </style>
        </div>


</body>
</html>
